<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	#canvas{
		background: #eee;
		border:1px solid cornflowerblue;
	}
	#radios{
		padding:10px;
	}
</style>
<body>
	<div>
		<input type="radio" id="repeatRadio" name="patternRadio" checked> repeat
		<input type="radio" id="repeatXRadio" name="patternRadio" checked> repeat-x
		<input type="radio" id="repeatYRadio" name="patternRadio" checked> repeat-y
		<input type="radio" id="noRepeatRadio" name="patternRadio" checked> no repeat
	</div>
	<canvas id="canvas" width="600" height="600"></canvas>
	<script>
	var canvas = document.getElementById('canvas'),
		context = canvas.getContext('2d');
	var repeatRadio = document.getElementById('repeatRadio'),
		repeatXRadio = document.getElementById('repeatXRadio'),
		repeatYRadio = document.getElementById('repeatYRadio'),
		noRepeatRadio = document.getElementById('noRepeatRadio'),
		image = new Image()

	function fillcanvasWidthPattern(repeatString){
		var pattern = context.createPattern(image,repeatString)
		context.clearRect(0,0,canvas.width,canvas.height)
		context.fillStyle = pattern
		context.fillRect(0,0,canvas.width,canvas.height)
	}

	repeatRadio.onclick = function(e){
		fillcanvasWidthPattern('repeat')
	}
	repeatXRadio.onclick = function(e){
		fillcanvasWidthPattern('repeat-x')
	}
	repeatYRadio.onclick = function(e){
		fillcanvasWidthPattern('repeat-y')
	}
	noRepeatRadio.onclick = function(e){
		fillcanvasWidthPattern('no-repeat')
	}
	image.src="eg.jpg"
	image.onload = function(e){
		fillcanvasWidthPattern('repeat')
	}
	</script>
</body>
</html>